<!-- 账户明细 -->
<template>
	<view class="user-bill">
		<u-tabs :list="tabsList" :is-scroll="false" :current="currentTab" :bold="true" :active-color="colorConfig.primary"
			border @change="changeTab" :height="80" />
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" @down="downCallback">
			<view class="p-t-20">
				<view v-for="(item, index) in list" :index="index" :key="item.id">
					<queue-cell :order="item" @cancel-order="onCancelOrder" @redeem-points="onDelOrder" @cancle-queue="handleCancleQueue"/>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import { getQueueRecord, delQueue, cancelQueue } from "@/api/user"

export default {
	mixins: [MescrollMixin], // 使用mixin
	name: "queue-list",
	props: {
	},
	data() {
		return {
			// Tabs 列表
			tabsList: [{
				name: '全部',
				value: 'all',
			}, {
				name: '等待中',
				value: 'in',
			}, {
				name: '已完成',
				value: 'ok',
			}, {
				name: '已取消',
				value: 'close',
			}],
			upOption: {
				empty: {
					icon: '/static/images/order_null.png',
					tip: '暂无记录', // 提示
				}
			},
			currentTab: 0,
			list: [], // 列表数据--全部
			type: 'all',

			show: false,
			options: [
				{
					text: '取消',
					style: {
						backgroundColor: '#ffcb0e'
					}
				},

			]
		};
	},

	methods: {
		// 改变当前的Tabs位置
		changeTab(index) {
			this.currentTab = index;
			this.type = this.tabsList[index].value;
			this.list = []
			this.mescroll.resetUpScroll();
		},

		// 上拉加载 
		upCallback(page) {
			const pageNum = page.num; // 页码, 默认从1开始
			const pageSize = page.size; // 页长, 默认每页10条
			getQueueRecord({
				page_size: pageSize,
				page_no: pageNum,
				type: this.type
			}).then(({
				data
			}) => {
				console.log(data)
				if (page.num == 1) this.list = [];
				const curPageData = data.lists;
				const curPageLen = curPageData.length;
				const hasNext = !!data.more;
				this.list = this.list.concat(curPageData);
				this.mescroll.endSuccess(curPageLen, hasNext);
			}).catch(() => {
				this.mescroll.endErr()
			})

		},
		onCancelOrder(order) {
			cancelQueue(order).then(({
				data
			}) => {
				this.mescroll.resetUpScroll();
			}).catch(() => {
				this.mescroll.endErr()
			})

		},
		onDelOrder(order) {
			delQueue(order).then(({
				data
			}) => {
				this.mescroll.resetUpScroll();
			}).catch(() => {
				this.mescroll.endErr()
			})

		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.list[index].show = true;
			this.list.map((val, idx) => {
				if (index != idx) this.list[idx].show = false;
			})
		},
		handleCancleQueue() {
			this.mescroll.resetUpScroll();
		}
	}
}
</script>

<style scoped>
.user-bill {
	background-color: #f5f5f5;
}

.add {
	width: 120rpx;
	height: 50rpx;
	border-radius: 20rpx;
	line-height: 50rpx;
	text-align: center;
	background: linear-gradient(180deg, rgba(255, 44, 60, 1) 0%, rgba(249, 95, 47, 1) 100%);
	color: #fff;
	font-size: 30rpx;
	font-weight: 600;
	margin-right: 20rpx;
}
</style>
